<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>CajaApp</title>
</head>
<body>
<script src="code.js"></script>
<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<!-- <script src="../../Scripts/jquery-1.7.1.min.js"></script>  -->

<button id="theButton">Send</button>
<br/>
<br/>

<select id="apiList">
    <option value = "1">GetWorkouts</option>
    <option value = "2">GetWorkoutById</option>
    <option value = "3">PostWorkout</option>
    <option value = "4">DeleteWorkout</option>
</select>
<br/>
<br/>

<div id="getWorkouts">
   
</div>

<div id="getWorkoutById" hidden="hidden">
    id: <input type="text" id="inputA">
</div>

<div id="postWorkout" hidden="hidden">
    Name: <input type="text" id="inputName">
    CategoryId: <input type="text" id="inputCategoryId">
    <fieldset>
         <legend>Additional Fields</legend>
        <div id = "addFields">

        </div>
    </fieldset>
    <button id="addFieldBtn">Add Field</button>
</div>

<div id="deleteWorkout" hidden="hidden">
    id: <input type="text" id="deleteWorkoutId">
</div>

<div id="answerDiv">
    Answer: <textarea id ="answer"></textarea>
</div>

<div id="debug"></div>

<script>
    document.getElementById('theButton').onclick = function () {
        var api = $("#apiList").val();

        if (api == 1) {
            getWorkouts(print);
            /*var url = "http://workoutapps.azurewebsites.net/api/workout";
            $.getJSON(url, function (data) {
                print(data);
            });*/
        }
        else if (api == 2) {
            var id = $('#inputA').val();
            getWorkoutById(id, print);
            /*var url = "http://workoutapps.azurewebsites.net/api/workout?id=".concat(id);
            $.getJSON(url, function (data) {
                print(data);
            });*/
        }
        else if (api == 3) {
            var name = $('#inputName').val();
            var categoryId = $('#inputCategoryId').val();
            var addFields = getAddFields();
            var workoutData = { name: name, categoryId: categoryId, additionalFields: addFields };
            postWorkout(JSON.stringify(workoutData), print);
            /* $.ajax({
                 url: "http://workoutapps.azurewebsites.net/api/workout",
                 type: 'POST',
                 contentType: 'application/json; charset=utf-8',
                 data: JSON.stringify(workoutData),
                 success: function (result) {
                     print(result);
                 }
             });*/
        }
        else if (api == 4) {
            var id = $('#deleteWorkoutId').val();
            deleteWorkout(id, print);
            /*var url = "http://workoutapps.azurewebsites.net/api/workout?id=".concat(id);
            $.getJSON(url, function (data) {
                print(data);
            });*/
        }
        
    };

    function print(data) {
        //document.getElementById('answer').innerHTML = JSON.stringify(data);
        $('#answer').html(JSON.stringify(data));
    }

    function getAddFields() {
        var addFields = [];
        var numberOfFields = $('input[id^="addFieldName"]').size();
        for (var i = 1; i < numberOfFields + 1; i++) {
            var temp = {};
            var fieldName = $('#addFieldName' + i).val();
            var fieldValue = $('#addFieldValue' + i).val();
            temp['fieldName'] = fieldName;
            temp['fieldValue'] = fieldValue;
            addFields.push(temp);
        }
        return addFields;
    }
</script>

<script>
    $('#apiList').change(function () {
        var api = $("#apiList").val();
        $('#answer').html("");
        if (api == 1) {
            $('#getWorkouts').show();
            $('#getWorkoutById').hide();
            $('#postWorkout').hide();
            $('#deleteWorkout').hide();
        }
        else if (api == 2) {
            $('#getWorkoutById').show();
            $('#postWorkout').hide();
            $('#getWorkouts').hide();
            $('#deleteWorkout').hide();
        }
        else if (api == 3) {
            $('#postWorkout').show();
            $('#getWorkoutById').hide();
            $('#getWorkouts').hide();
            $('#deleteWorkout').hide();
        }
        else if (api == 4) {
            $('#deleteWorkout').show();
            $('#getWorkoutById').hide();
            $('#postWorkout').hide();
            $('#getWorkouts').hide();
        }
        $('#debug').html(api);
    });

    $("#addFieldBtn").click(function () {
        var i = $('input[id^="addFieldName"]').size() + 1;
        $('#addFields').append("<div id=field"+i+"><input type='text' class='additionalField' value='FieldName' id='addFieldName" + i + "'></input> = "
        + "<input type='text' class='additionalField' value='FieldValue' id='addFieldValue" + i + "'></input>"
        + "<button class='deleteBtn' id='delete" + i + "'>X</button></div>");

        $('#delete' + i).click(function () {
            $('#field' + i).empty();
            $('#field' + i).remove();
        });
    });
</script>
</body>
</html>